<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="val in item.values" :key="val.name">
          <img v-if="val.picture"
               v-lazy="val.picture"
               :class="{selected: val.selected, disabled: val.disabled}"
               :title="val.name"
               @click="changeSku(val, item.values)">
          <span v-else
                :class="{selected: val.selected, disabled: val.disabled}"
                @click="changeSku(val, item.values)">
            {{ val.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>

import { getPathMap, initDefaultSelected, getSelectedValues, updateDisableStatus } from '@/components/goods/useGoodsSku'
import { splitter } from '@/constant'

export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => ({
        specs: [],
        skus: []
      })
    },
    skuId: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const pathMap = getPathMap(props.goods.skus)
    // 组件初始化: 更新按钮禁用状态
    updateDisableStatus(props.goods.specs, pathMap)

    // 在购物车页面中, 默认展示选中的商品
    if (props.skuId) {
      initDefaultSelected(props.goods, props.skuId)
    }
    //
    // 1.选中与取消选中, 约定在每一个按钮都拥有自己的选中状态数据: selected
    // 1.1.点击的是已选中, 只需要取消当前的选中
    // 1.2.点击的是未选中, 把同一个规则的按钮改成未选中, 当前点击的改成选中(排它思想)
    const changeSku = (val, item) => {
      // 当按钮是禁用的, 阻止程序往下执行
      if (val.disabled) return

      // 未选中
      if (typeof val.selected === 'undefined' || val.selected === false) {
        item.forEach(item => item.selected = false)
        val.selected = true
      } else {
        // 选中状态
        val.selected = false
      }
      // 点击按钮的时候更新禁用状态
      // http://localhost:8181/#/product/1379052170040578049 测试数据
      // http://localhost:8181/#/product/3994483
      updateDisableStatus(props.goods.specs, pathMap)

      // 将你选择的sku信息通知父组件 {skuId, price, oldPrice, inventory, specsText}

      const validSelectedValues = getSelectedValues(props.goods.specs).filter(item => item)
      // console.log(validSelectedValues)
      if (validSelectedValues.length === props.goods.specs.length) {
        // 1.选择完整的sku组合按钮, 才可以拿到这些信息, 提交父组件
        // 通过手动遍历找
        // const sku = props.goods.skus.find(item => {
        //   const skuStr = item.specs.map(attr => attr.valueName).join()
        //   return skuStr === validSelectedValues.join()
        // })

        // 通过路径字典找
        const skuIds = pathMap[validSelectedValues.join(splitter)]
        const sku = props.goods.skus.find(item => item.id === skuIds[0])

        const info = {
          skuId: sku.id,
          price: sku.price,
          oldPrice: sku.oldPrice,
          inventory: sku.inventory,
          // 属性名: 属性值 属性名1: 属性值1       例如: 颜色:枫叶红 颜色:枫叶红 尺码:130cm
          specsText: sku.specs.map(item => `${item.name}:${item.valueName}`).join(' ')
        }
        // console.log(info)
        emit('change', info)
      } else {
        // 2.不是完整的sku组合按钮, 提交空对象父组件
        // 父组件需要判断是否规格选择完整, 不完整不能添加购物车
        emit('change', {})
      }
    }

    console.log(pathMap)
    return {
      changeSku
    }
  }
}
</script>
<style lang="less" scoped>
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;

  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      flex: 1;
      color: #666;

      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }

      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
